<template>
    <view>
        <video
            id="myVideo"
            class="content"
            object-fit="fill"
            :enable-play-gesture="false"
            :enable-progress-gesture="false"
            :show-loading="false"
            :show-center-play-btn="false"
            :src="login_bg_video"
            :autoplay="true"
            :loop="true"
            :controls="false"
            :muted="true"
        >
            <cover-view class="xz-title" style="">{{ login_bg_text }}</cover-view>
            <cover-view v-if="error_log" class="xz-log-title1"><text>哦吼~登录似乎出现了个小问题</text></cover-view>
            <cover-view v-if="error_log" class="xz-log-title2"><text>请长按下面内容复制发给客服人员解决</text></cover-view>
            <cover-view v-if="error_log" class="xz-log-info">
                <text user-select>{{ error_log }}</text>
            </cover-view>
            <cover-view class="xz-button-1" @click="getLogin">{{ clickBtnText || i18n('user').loginBtn }}</cover-view>
        </video>
    </view>
</template>

<script>
const MyApp = getApp();
const globalData = MyApp.globalData;
export default {
    data() {
        return {
            login_bg_video: '',
            login_bg_text: '',
            loginCode: '',
            getNewCode: false,
            show_xx: true,
            clickBtn: false,
            clickBtnText: '',
            error_log: ''
        };
    },
    computed: {
        i18n() {
            return globalData.$t;
        }
    },
    watch: {
        getNewCode(val) {
            let _this = this;
            if (val) {
                uni.login({
                    provider: 'weixin',
                    success: function(loginRes) {
                        _this.loginCode = loginRes.code;
                    }
                });
            }
        }
    },
    onShow() {
        let _this = this;
        // 全局配置
        this.$http.post('/videos/config/getConfig', {}).then(res => {
            if (res.data.show_xx != 1 || res.data.member_group_switch > 0) {
                _this.login_bg_video = res.data.login_bg_video;
            } 
            _this.login_bg_text = res.data.login_bg_text;
        });

        uni.login({
            provider: 'weixin',
            success: function(loginRes) {
                _this.loginCode = loginRes.code;
            }
        });
    },
    methods: {
        getLogin() {
            let _this = this;
            if (_this.clickBtn) {
                return false;
            }
            _this.clickBtn = true;
            _this.clickBtnText = '正在拉取授权...';
            if (_this.loginCode.length <= 0) {
                uni.showToast({
                    title: _this.i18n('user').getCode,
                    icon: 'none'
                });
                return false;
            }
            // 获取用户信息
            uni.getUserProfile({
                desc: _this.i18n('user').getUserInfo,
                lang: 'zh_CN',
                complete(userinfo) {
                    _this.clickBtnText = '准备登录...';
                    userinfo.code = _this.loginCode;
                    userinfo.iv = encodeURIComponent(userinfo.iv);
                    userinfo.encryptedData = encodeURIComponent(userinfo.encryptedData);
                    uni.showLoading({
                        title: '正在登录...',
                        mask: true
                    });
                    try {
                        _this.$http
                            .post('/user/wechat/mplogin', userinfo)
                            .then(res => {
                                _this.clickBtn = false;
                                _this.clickBtnText = _this.i18n('user').loginBtn;
                                uni.hideLoading();
                                if (200 == res.code) {
									_this.getNewCode = false;
									uni.setStorageSync('userInfo', res.data);
									uni.setStorageSync('token', res.data.token);
									_this.$http.post('/videos/config/getConfig', {}).then(re => {
										uni.setStorageSync('sys_config', re.data);
									}).then(v => {
										let from_page = uni.getStorageSync('from_page');
										uni.reLaunch({
										    url: from_page ? from_page : '/pages/user/index'
										});
									})
                                } else {
                                    _this.getNewCode = true;
                                    uni.showModal({
                                        title: '温馨提示',
                                        content: res.msg || '登录失败',
                                        showCancel: false,
                                        complete() {
                                            let from_page = uni.getStorageSync('from_page');
                                            uni.reLaunch({
                                                url: '/pages/index/index'
                                            });
                                        }
                                    });
                                }
                            })
                            .catch(err => {
                                _this.error_log = JSON.stringify(error_log);
                                uni.hideLoading();
                            });
                    } catch (e) {
                        _this.error_log = JSON.stringify(e);
                        uni.hideLoading();
                    }
                }
            });
        }
    }
};
</script>

<style>
.content {
    width: 750rpx;
    height: 100%;
    /* z-index: 9; */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #007aff;
}
.xz-title {
    width: 600rpx;
    height: 90rpx;
    position: fixed;
    bottom: 400rpx;
    margin-left: 40rpx;
    border-radius: 12rpx;
    line-height: 90rpx;
    color: #ffffff;
    font-size: 32rpx;
    /* text-shadow: 5px 5px 5px #FF0000; */
}
.xz-log-title1 {
    width: 600rpx;
    position: fixed;
    bottom: 1000rpx;
    margin-left: 40rpx;
    border-radius: 12rpx;
    line-height: 90rpx;
    color: #ffffff;
    font-size: 14px;
    /* text-shadow: 5px 5px 5px #FF0000; */
}
.xz-log-title2 {
    width: 600rpx;
    position: fixed;
    bottom: 950rpx;
    margin-left: 40rpx;
    border-radius: 12rpx;
    line-height: 90rpx;
    color: #ffffff;
    font-size: 14px;
    /* text-shadow: 5px 5px 5px #FF0000; */
}
.xz-log-info {
    width: 600rpx;
    position: fixed;
    bottom: 800rpx;
    margin-left: 40rpx;
    border-radius: 12rpx;
    line-height: 90rpx;
    color: #ffffff;
    font-size: 32rpx;
    /* text-shadow: 5px 5px 5px #FF0000; */
}
.xz-button-1 {
    width: 250rpx;
    height: 70rpx;
    position: fixed;
    bottom: 305rpx;
    margin-left: 40rpx;
    border-radius: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 70rpx;
    border: 4rpx solid #ffffff;
    border-radius: 12rpx;
    color: #ffffff;
}
</style>
